<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCourseData } from "@/store/useLiveCourse";
const router = useRouter();
const route = useRoute();
const courseStore = useCourseData();

const handleReplay = () => {
  router.push({
    name: "LiveCourse",
    query: {
      ...route.query,
      roomId: route.query.roomId,
      isReplay: 1
    }
  });
};
</script>

<template>
  <div
    class="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col relative overflow-hidden"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div
        class="absolute -left-16 -top-16 w-48 h-48 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full opacity-10 blur-3xl"
      ></div>
      <div
        class="absolute -right-16 top-32 w-64 h-64 bg-gradient-to-bl from-blue-200 to-blue-300 rounded-full opacity-10 blur-3xl"
      ></div>
      <div
        class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-96 h-32 bg-gradient-to-r from-blue-50 to-blue-100 rounded-full opacity-20 blur-2xl"
      ></div>
      <div class="absolute inset-0 opacity-5">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <defs>
            <pattern
              id="wave"
              width="100"
              height="100"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M0 50 Q 25 25, 50 50 T 100 50"
                stroke="currentColor"
                fill="none"
                stroke-width="1"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#wave)" />
        </svg>
      </div>
    </div>

    <!-- 内容区域 -->
    <div
      class="flex-1 flex flex-col items-center justify-center px-6 relative z-10"
    >
      <div class="text-2xl font-bold text-cyan-500 mb-2">本场直播已结束</div>
      <div class="text-base text-cyan-400 mb-10">
        - {{ courseStore.courseData?.title }} -
      </div>
      <button
        v-if="courseStore.courseData?.transcribe.openType !== 0"
        @click="handleReplay"
        class="w-72 max-w-full py-3 rounded-lg bg-gradient-to-r from-cyan-400 to-cyan-500 text-white text-lg font-medium active:opacity-90 transition-all duration-300 shadow-md"
      >
        重新观看
      </button>
    </div>

    <!-- 底部时钟装饰 -->
    <div
      class="absolute right-0 bottom-0 opacity-10 z-0 pointer-events-none select-none"
    >
      <svg width="200" height="200" viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="90" fill="#e5e7eb" />
        <rect x="95" y="40" width="10" height="60" rx="5" fill="#bdbdbd" />
        <rect
          x="100"
          y="100"
          width="50"
          height="10"
          rx="5"
          fill="#bdbdbd"
          transform="rotate(30 100 100)"
        />
      </svg>
    </div>
  </div>
</template>

<style scoped>
.min-h-screen {
  min-height: 100vh;
}
</style>
